<template>
  <!-- <a-drawer 
    title="订单详情"
    wrapClassName="weiben-private-drawer"
    width="70%"
    :closable="false"
    :maskClosable="true"
    :visible="visible"
    :after-visible-change="afterVisibleChange"
    @close="onClose"
  >
    <a-spin :spinning="loading">
  
    </a-spin>
  </a-drawer>  -->

  <div v-if="visible" style="background-color: white">

    <!-- <a-spin :spinning="loading"> -->
    <div class="wms-task-management-detail-div">
      <div class="drawer-content">
        <span style="font-weight:bold;cursor:default;">
          <a style="cursor:default;">{{ row.no }}</a>单据详情
        </span>
        <div style="margin-top: 10px;">
          <a-table :columns="columns" :data-source="list" row-key="id" :pagination="ipagination" :bordered="false"
            :scroll="{ x: true }" :rowKey="(record) => record.id"
            :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
            <template slot="index" slot-scope="text, record, index">
              <span>{{ index + 1 }}</span>
            </template>
            <span slot="InspectionResultsSlots" slot-scope="text">
              {{ 'InspectionResults' | dictType(text) }}
            </span>
            <span slot="containerStatusscopedSlots" slot-scope="text">
              <a-tag
                :color="text == '1' ? '#daa520' : (text == '2' ? '#cd5c5c' : (text == '3' ? '#add8e6' : '#696969'))">{{
                  'orderdetails_statusenum' | dictType(text) }}</a-tag>
            </span>
          </a-table>
        </div>
      </div>
    </div>
    <!-- </a-spin> -->


  </div>
</template>

<script>
import { WmsOrderRukuDetail } from '@/api/modular/main/WmsOrderInspectionManage'
export default {
  name: 'wmsOrderRukuManagementDetailDrawer',
  emits: ['update:visible', 'postBjData'],
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      containerStatusData: [],
      list: [],
      selectedRowKeys: [],
      columns: [
        // {
        //   dataIndex: 'index',
        //   title: '序号',
        //   scopedSlots: { customRender: 'index' },
        //   align: 'center',
        //   width: '60'
        // },
        {
          dataIndex: 'itemNo',
          title: '行号',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'materialcode',
          title: '物料编号',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'materialname',
          title: '物料名称',
          align: 'center',
          width: '100px'
        },

        {
          title: '状态',
          align: 'center',
          dataIndex: 'orderStatus',
          scopedSlots: { customRender: 'containerStatusscopedSlots' },
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'contractCode',
          title: '合同编号',
          align: 'center',
          width: '100px'
        },

        {
          dataIndex: 'price',
          title: '单价',
          align: 'center',
          width: '100px'
        },

        {
          dataIndex: 'projectCode',
          title: '项目编号',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'unit',
          title: '单位',
          align: 'center',
          width: '100px'
        },
 
        {
          dataIndex: 'qty',
          title: '数量',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'inspectionResults',
          title: '检验结果',
          align: 'center',
          width: '100px',
          scopedSlots: { customRender: 'InspectionResultsSlots' },
        },

        {
          dataIndex: 'customsNum',
          title: '报关数量',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'customsPrices',
          title: '报关金额',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'customsUnitName',
          title: '报关单位',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'singleLength',
          title: '单根长度',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'sumPrice',
          title: '成本金额',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'taCode',
          title: 'TA号',
          align: 'center',
          width: '100px'
        },
        {
          dataIndex: 'theoreticalWeight',
          title: '理论重量',
          align: 'center',
          width: '100px'
        },

        {
          dataIndex: 'specialNeeds',
          title: '特殊要求',
          align: 'center',
          width: '100px'
        },
      ],
      // 分页
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '40'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + '共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
        size: 'small',
        InspectionResultsData: []
      },
    }
  },

  created() {
    const containerStatusOption = this.$options;
    this.containerStatusData = containerStatusOption.filters['dictData']('orderdetails_statusenum');

    // const InspectionResultsDataOption = this.$options
    // this.InspectionResultsData = InspectionResultsDataOption.filters['dictData']('InspectionResults')
  },
  methods: {
    onClose() {
      this.close()
    },
    close() {
      this.$emit('update:visible', false)
    },
    afterVisibleChange(visible) {
      if (visible) {
        this.initShow()
      } else {
        this.afterClsoe()
      }
    },
    initShow() {
      this.loading = true;
      this.getList(() => {
        this.loading = false;
      })
    },
    getList(row) {
      let params = { id: row.id }
      WmsOrderRukuDetail(params).then(d => {
        this.list = d.data.rows || []
        this.$emit('update:visible', true)
        // callback && callback(true)
      }).catch(() => {
        this.$emit('update:visible', false)
        this.list = []
        // callback && callback(false)
      })
    },
    afterClsoe() {
      this.list = []
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.$emit('postBjData', this.selectedRows)
    }
  }
}
</script>

<style lang="less" scoped>
.wms-task-management-detail-div {
  height: 100%;
  overflow: auto;

  .drawer-content {
    padding: 16px;
  }
}
</style>